<template>
	<view>
		<view class="top">
			<map id="my_test_map" style="width: 750rpx; height: 540upx;" :include-points='get_address'
				@markertap="check_market" :circles="circles" :scale="scale" @regionchange="regionchange"
				:markers='markers' :latitude="center_lat" :longitude="center_lng">
			</map>
			<button @click="change_markers">变更</button>
		</view>
		<view class="font" v-for="item in resultRoId">
			<text>订单编号{{item.number}}</text>
			<view class="img">
				<img class="location" src="/static/img/location.png">
				<text class="content-text-location-font">{{item.address}}</text>
			</view>
			<view class="img">
				<img class="time" src="/static/img/time.png">
				<text class="content-text-location-font">上门时间：{{item.getTime}}</text>
			</view>
			<view v-if="item.roType !== 4 && item.roType !== 5 ">
				<view class="font">
					<text>联系方式:&nbsp {{item.contactsName}}&nbsp &nbsp{{item.phone}}</text>
				</view>
				<view class="font">
					<text>回收内容:&nbsp {{item.content}}</text>
				</view>
				<view class="font">
					<text>预计重量:&nbsp {{item.weight}}kg</text>
				</view>
				<view class="font">
					<text>备注:&nbsp {{item.remarks}}</text>
				</view>
				<view class="font" v-if="item.sumTime > 0 & item.roType == 1 ">
					<text>接单剩余时间:
						<view class="djs">
							<uni-countdown :day="item.d" :hour="item.h" :minute="item.m" :second="item.s">
							</uni-countdown>
						</view>
					</text>
				</view>
				<view class="font" v-if="item.sumTime == null">
					<text class="content-text-location-font" style="color: crimson;">您已超时

					</text>
				</view>
			</view>
		</view>

		<view v-for="item in resultRoId">
			<view v-if="item.roType !== 4 && item.roType !== 5 ">
				<view class="uni-box1">
					<view class="mileage">
						<img class="phone" src="/static/img/phone.png">
					</view>
					<view class="line">

					</view>
					<view class="tolai">
						<img class="chat" src="/static/img/chat.png">
					</view>
				</view>
				<navigator @click="orderState(item.roType,item.roId)">
					<view class="uni-box2">
						<text class="state" v-if="item.roType==1">立即接单</text>
						<text class="state" v-if="item.roType===2">导航</text>
						<text class="state" v-if="item.roType===3">已送达</text>
						<text class="state" v-if="item.roType===4">已结算</text>
					</view>
				</navigator>
			</view>
		</view>
		<view v-for="item in resultRoId">
			<view v-if="item.roType == 4 ">
				<view class="box">
					<view class="details">
						<text>废纸(KG):{{k.sum1}}</text>
					</view>
					<!-- <view class="number">
						<uni-number-box :value="details.numberValue1"  @change="change1"/>
					</view> -->
					<view class="price">
						<text>5币/公斤</text>
					</view>
				</view>
				<view class="box">
					<view class="details">
						<text>塑料(KG):{{k.sum2}}</text>
					</view>
					<!-- <view class="number">
						<uni-number-box :value="details.numberValue2"  @change="change2"/>
					</view> -->
					<view class="price">
						<text>8币/公斤</text>
					</view>
				</view>
				<view class="box">
					<view class="details">
						<text>金属(KG):{{k.sum3}}</text>
					</view>
					<!-- <view class="number">
				
						<uni-number-box :value="details.numberValue3" @change="change3" />
				
					</view> -->
					<view class="price">
						<text>12币/公斤</text>
					</view>
				</view>
				<view class="box">
					<view class="details">
						<text>玻璃(KG):{{k.sum4}}</text>
					</view>
					<!-- <view class="number">
						<uni-number-box :value="details.numberValue4" @change="change4" />
					</view> -->
					<view class="price">
						<text>10币/公斤</text>
					</view>
				</view>
				<view class="total">合计(KG): {{k.sum}}</view>

				<view class="total2">{{k.money}}币</view>
				<view class="fonttime">订单完成时间: {{item.updateTime}}</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nums: '',

				d: '',
				h: '',
				m: '',
				n: '',
				resultRoId: {},
				id: 'ybus_map',
				center_lat: 40.238544,
				center_lng: 116.133069,
				markers: [{
					id: 'begin',
					latitude: 40.238544,
					longitude: 116.133069,
					iconPath: "../",
					width: 50,
					height: 50
				}],
				scale: 15,
				get_address: [],
				circles: [
					// {//在地图上显示圆
					//  　　latitude: 34.252109,
					//  　　longitude: 108.840866,
					//  　　fillColor:"#e6060a6A",//填充颜色
					// 　　 color:"#e6060a6A",//描边的颜色
					//  　　radius:300,//半径
					// 　　 strokeWidth:2//描边的宽度
					//  }
				]

			}

		},
		onLoad(options) {

			console.log(options)
			this.loadData()
			this.loadDataRedis()
		},
		methods: {
			loadDataRedis(){
				console.log(this.options.roId,"key")
				uni.request({
					url: 'http://localhost:9525/xkrider/recyclingorder/getRedisRecyclingorder',
					method: 'GET',
					data: {
						redisId: this.options.roId,		
					},
					dataType: 'json',
					success: (res) => {
						// var result = JSON.stringify(res.data.data.message);
						this.k = res.data.data.k;
						console.log(this.k, "看看")
						
					},
				})
			},
			orderState(roType, roId) {
				// console.log("状态", roType, "订单", roId)
				if (roType == 3) {
					//console.log("是3")
					uni.navigateTo({
						url: './Recovery?roId=' + roId
					})
				}
				console.log(roType)
				console.log(this.options.roId)
				uni.request({
					url: 'http://localhost:9525/xkrider/recyclingorder/uptRecyclingorderRoId',
					method: 'GET',
					data: {
						roId: this.options.roId,
						roType: roType,
						riderId: 3
					},
					dataType: 'json',
					success: (res) => {
						var result = JSON.stringify(res.data.data.message);
						this.resultRoId = res.data.data.recyclingorderVoRoId;
						//console.log(this.resultRoId, "看看")
						this.loadData()
					},
				})
			},
			loadData() {
				// console.log(this.options.roId)
				uni.request({
					url: 'http://localhost:9525/xkrider/recyclingorder/getRecyclingorderRoId',
					method: 'GET',
					data: {
						roId: this.options.roId,
					},
					dataType: 'json',
					success: (res) => {
						var result = JSON.stringify(res.data.data.message);
						this.resultRoId = res.data.data.recyclingorderVoRoId;
						// console.log(this.resultRoId, "看看")
						this.getTimes = res.data.data.recyclingorderVoRoId[0].getTime
						// console.log(this.getTimes)
						var date = new Date();
						var now = date.getTime(); //获得当前时间与1970年1月1日时间相差的毫秒数				
						var star = this.getTimes
						var endDate = new Date(star);
						var end = endDate.getTime(); //结束时间与1970年1月1日时间相差的毫秒数	
						// console.log(end)
						var leftTime = end - now; //计算两日期之间相差的毫秒数
						// console.log(leftTime)
						if (leftTime >= 0) {
							this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
							this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
							this.m = Math.floor(leftTime / 1000 / 60 % 60);
							this.s = Math.floor(leftTime / 1000 % 60);

						}
						res.data.data.recyclingorderVoRoId[0].d = this.d
						res.data.data.recyclingorderVoRoId[0].h = this.h
						res.data.data.recyclingorderVoRoId[0].m = this.m
						res.data.data.recyclingorderVoRoId[0].s = this.s
						res.data.data.recyclingorderVoRoId[0].sumTime = this.d + this.h + this.m + this.s
						console.log(res.data.data.recyclingorderVoRoId[0].sumTime, "kankanwo1")
						console.log(this.d + '天' + this.h + '时' + this.m + '分' + this.s + '秒')
							// this.loadDataRedis()	
						
					},
				})
			},
			change_markers() {
				console.log("开始执行地图标注");
				this.center_lat = 34.275092
				this.center_lng = 108.961716
				//生成标记点
				var begin_markers = [{
					id: 123,
					latitude: 34.275093,
					longitude: 108.961716,
					iconPath: '../static/1.png',
					width: 50,
					height: 50,
					// title:'标注点A',
					callout: [{
						content: "tes****123456t",
						color: '#333',
						bgColor: "#fff",
						fontSize: '68',
						padding: '20upx',
						display: 'ALWAYS'
					}]
				}, {
					id: 124,
					latitude: 34.254430,
					longitude: 108.947040,
					iconPath: "../../static//map_getaddress.png",
					width: 50,
					height: 50
				}]
				var now_address = [{
					id: 'begin',
					latitude: 34.252109,
					longitude: 108.840866,
					iconPath: "../../static//map_getaddress.png",
					width: 50,
					height: 50
				}]
				//获取地图
				this.markers = now_address.concat(begin_markers);
				console.log();

				this.circles = [{ //在地图上显示圆
						latitude: 34.254430,
						longitude: 108.947040,
						fillColor: "#9db0de6A", //填充颜色
						color: "#00aaff", //描边的颜色
						radius: 300, //半径
						strokeWidth: 1 //描边的宽度
					},
					{ //在地图上显示圆
						latitude: 34.275093,
						longitude: 108.966816,
						fillColor: "#9db0de6A", //填充颜色
						color: "#00aaff", //描边的颜色
						radius: 300, //半径
						strokeWidth: 1 //描边的宽度
					}
				]
				//缩放视野以包含所有给定的坐标点
				this.get_address = [{
						latitude: 34.254430,
						longitude: 108.947040,
					},
					{
						latitude: 34.275093,
						longitude: 108.966816
					}
				]

				//
				// this.$forceUpdate();
			},
			//拖拽地图
			regionchange(e) {
				console.log(e);

				var _that = this;
				_that.mainmap = uni.createMapContext('my_test_map', this);
				_that.mainmap.getCenterLocation({
					success(res) {
						var lat = res.latitude
						var lng = res.longitude
						console.log(lat);
						console.log(lng);
						//重设标记点
						_that.mainmap.translateMarker({
							markerId: 'begin',
							destination: {
								latitude: lat,
								longitude: lng
							},
							duration: 350,
							animationEnd() {
								console.log('设置');
							}
						})
					}
				})

			},
			//点击标记
			check_market(e) {
				console.log(e.detail);
			}
		}
	}
</script>
export default {
data() {
return {

},
onLoad() {

},
methods: {}
}
</script>

<style>
	page {
		/* background-color: #EBFCF9; */
		font-weight: bold;
	}
	.fonttime{
		float: left;
		margin-top: 30rpx;
		margin-left: 100rpx;
		font-size: 20rpx;
		color: #999999;
	}
	.box {
		/* border: 5px solid #3F536E; */
		float: left;
		width: 100%;
		margin-top: 10rpx;
		margin-left: 20rpx;
	}

	.price {
		float: right;
		margin-top: 20rpx;
		margin-right: 60rpx;
		font-size: 20rpx;
		color: #ED5565;
	}

	.number {
		margin-top: 20rpx;
		margin-left: 10rpx;
		float: left;
	}

	.total {
		font-size: 30rpx;
		margin-top: 30rpx;
		margin-left: 100rpx;
		float: left;
	}

	.total2 {
		font-size: 30rpx;
		margin-top: 30rpx;
		margin-right: 50rpx;
		float: right;
		color: #ED5565;
	}

	.details {
		font-size: 20rpx;
		margin-top: 20rpx;
		margin-left: 100rpx;
		float: left;
	}

	.details {
		margin-left: 80rpx;
	}

	.djs {
		float: right;
		margin-right: 220rpx;
	}

	.state {
		padding: 50rpx;
		font-size: 34rpx;
		color: #FFFFFF;
	}

	.uni-box2 {
		width: 360rpx;
		height: 130rpx;
		/* border-radius: 7px; */
		/* border: 1px solid #3F536E; */
		padding: 10px;
		/* margin-left: 25px; */
		/* box-shadow: darkgrey 3px 3px 3px 3px; */
		/* // position: absolute;
		// left: 25rpx; */
		/* background-color: #FFFFFF; */
		/* float: left; */
		margin-top: 20px;
		float: right;
		display: flex;
		justify-content: center;
		background-color: #2ABA66;
	}

	.line {
		width: 0rpx;
		height: 50rpx;
		border: 1px solid #E4E4E4;
		float: left;
		margin-left: 65rpx;
		margin-top: 50rpx;
	}

	.chat {
		width: 50rpx;
		height: 50rpx;
		margin-top: 50rpx;
		margin-left: 50rpx;
		float: left;
	}

	.phone {
		width: 50rpx;
		height: 50rpx;
		margin-top: 50rpx;
		margin-left: 40rpx;
		float: left;
	}

	.uni-box1 {
		width: 300rpx;
		height: 130rpx;
		/* border-radius: 7px; */
		/* border: 1px solid #3F536E; */
		padding: 10px;
		float: left;
		margin-top: 20px;
	}

	.font {
		margin-top: 30rpx;
		margin-left: 60rpx;
		font-size: 25rpx;
	}

	.img {
		margin-top: 30rpx;
	}

	.location {
		width: 45rpx;
		height: 45rpx;
		// margin-top: 15rpx;
		margin-left: 15rpx;
		float: left;
		;
	}

	.time {
		width: 43rpx;
		height: 43rpx;
		// margin-top: 15rpx;
		margin-left: 15rpx;
		float: left;
	}
</style>
